<template>
    <div class='box'>
      <header class='header'>
        <ul class='pict'>
           <li><img src="../img/25.png"></li>
           <li style="padding-top:1.5rem">商城</li>
        </ul>
         <ul class="list-menus">
         <li>
           <img src="../img/5.png">
           <span>优惠券商城</span>
         </li>
         <li>
            <img src="../img/9.png">
            <span>V金商城</span>
         </li>
         <li>
            <img src="../img/7.png">
            <span>礼品卡商城</span>
         </li>
         <li>
            <img src="../img/10.png">
            <span>好物商城</span>
         </li>
	   </ul>
       </header>

       <div class='tu'><img src="../img/26.png"></div>
       <h1 class="font">不容错过的商品</h1>
        <ul class='tus'>
          <li><img src="../img/27.png"></li>
          <li><img src="../img/28.png"></li>
        </ul>
         <ul class='tus'>
          <li><img src="../img/27.png"></li>
          <li><img src="../img/28.png"></li>
        </ul>
        <div class='zit'>
          <div class='shang'><img src="../img/29.png"></div>
          <div class='xia'>
            <div class='zuo1'>
            <span style="font-family:方正舒体;font-size:1.4rem;">指定经典饭类5分量饭劵</span>
            <span style="color:#ff4747;font-size:1.5rem;">￥150
            <a style="text-decoration:line-through;font-size:1rem;color:#555555;padding-left:0.3rem;">单品总价290元起</a></span>
            </div>
            <div class='you1'>
              <button>抢购</button>
            </div>
          </div>
        </div>
         <div class='zit'>
          <div class='shang'><img src="../img/30.png"></div>
          <div class='xia'>
            <div class='zuo1'>
            <span style="font-family:方正舒体;font-size:1.4rem;">指定经典饭类5分量饭劵</span>
            <span style="color:#ff4747;font-size:1.5rem;">￥150
            <a style="text-decoration:line-through;font-size:1rem;color:#555555;padding-left:0.3rem;">单品总价290元起</a></span>
            </div>
            <div class='you1'>
              <button>抢购</button>
            </div>
          </div>
        </div>
          <div class='zit'>
          <div class='shang'><img src="../img/31.png"></div>
          <div class='xia'>
            <div class='zuo1'>
            <span style="font-family:方正舒体;font-size:1.4rem;">指定经典饭类5分量饭劵</span>
            <span style="color:#ff4747;font-size:1.5rem;">￥150
            <a style="text-decoration:line-through;font-size:1rem;color:#555555;padding-left:0.3rem;">单品总价290元起</a></span>
            </div>
            <div class='you1'>
              <button>抢购</button>
            </div>
          </div>
        </div>
        
    </div>
</template>

<script>
export default{
    data() {
        return {

        }
    },
    components: {

    }
}
</script>

<style scoped lang="less">
   .box{
       height:100%;
       width:100%;
   }
   .header{
       width:100%;
       height:10rem;
       background:#fff;
   }
   .pict{
        width:100%;
        height:4.1rem;
        text-align:center;
        display:flex;
        margin:0 auto;
        position:fixed;
        background:#fff;
        padding-left:4rem;
        li{
            float:left;
            font-size:1.5rem;
            padding-top:1rem;
             text-align:center;
            img{
                width:50%;
            }
        }
   }
   .list-menus {
  display: flex;
  padding-top: 10px;
  position:fixed;
  top:4rem;
  background:#fff;
  width:100%;
}
.list-menus li {
  flex: 1;  0
  list-style: none;
  text-align: center;
  img{
      width:50%;
  }
}
.list-menus li:last-child {
  border-right: none;
}
.list-menus li span {
  display: block;
  padding-top:1rem;
}
.tu{
    width:100%;
    height:9rem;
    margin-top:2rem;
    img{
        width:100%;
        height:100%;
    }
}
.font{
    margin-top:1rem;
    margin-left:1rem;
    font-size:1.5rem;
    font-family:"幼圆";
    color:black;
}
.tus{
    display:flex;
    width:100%;
    margin-top:1rem;
    li{
        width:50%;
        padding-left:1rem;
        flex:1;
         img{
             width:93%;
             text-align:center;
         }
    }
}
.zit{
    width:95%;
    height:20rem;
    border:1px solid #ccc;
    margin:1rem auto;
    display:flex;
   flex-direction:column;
   .shang{
       width:100%;
       height:70%;
       img{
           width:100%;
           height:100%;
       }
   }
   .xia{
       width:100%;
       height:30%;
       display:flex;
       .zuo1{
          display:flex;
          flex-direction:column;
          width:70%;
          float:left;
          span{
              line-height:3rem;
              padding-left:2rem;
          }
       }
       .you1{
           width:30%;
           float:right;
           padding-top:1rem;
           button{
               width:55%;
               height:50%;
               background:#ff4747;
               border:none;
               color:#fff;
               border-radius:0.3rem;
               font-family:"幼圆";
               margin-left: 1rem;
               margin-top: 1rem;
           }
       }
   }
}
</style>